<template>
	<view class="box">
	  <scroll-view class="list" scroll-x="true" scroll-with-animation="true">
		  <view
		  v-for="(item,index) in navList" 
		  :key="index" 
		  :class=" curTab==index ? 'nav-item selected-tab':'nav-item'" 
		  @click="selectTab(index)">
			{{item.name}}
		  </view>
	  </scroll-view> 
		<view class="lis" >
		  <swiper class="swiper" :current="current" @change="swiperChange">
		    <swiper-item> 
		      <scroll-view class="item1"
		        scroll-y 
		        refresher-triggered = 'isLoading'
		        refresher-enabled="true" 
		        refresher-threshold="80" 
		        lower-threshold="50"
		        refresher-background="#E3E3E3"  
		        @refresherrefresh="pullDownRefresh()"
		        @scrolltolower='lower()'
		        nable-flex="true"
		      >
		      <view 
		      v-for="(item,index) in musicList" 
		      :key="id" @click="action(index)" 
		      :class="currentIndex === index ? 'listItem listItems':'listItem'"
		      >
		          <image :src="item.musicAlbumPicUrl"></image>
		          <view class="listItem1">
		            <view>{{item.musicName}}</view>
		            <view class="musicMes">
		              {{ item.musicArtistName }} - {{ item.musicAlbumName }}
		            </view>
		          </view>
		          <view class="listItem2">
		            <image v-if="ready === 'stop'" :src="index === currentIndex ? '../../static/img/listStop.png' : ''" @click="playandstop(index)"></image>
		            <image v-else :src="index === currentIndex ? '../../static/img/listPlay.png' : ''"  @click="playandstop(index)" ></image>
		          </view>
		        </view>
		      </scroll-view>
		    </swiper-item>
		    <swiper-item>
		      <scroll-view class="item2"
		        scroll-y="true"
		        refresher-triggered = 'isLoading'
		        refresher-enabled="true" 
		        refresher-threshold="80" 
		        lower-threshold="50"
		        refresher-background="#E3E3E3"  
		        @refresherrefresh="pullDownRefresh()"
		        @scrolltolower='lower()'
		        enable-flex="true"
		      >
		      <view 
		      v-for="(item,index) in musicList" 
		      :key="id" @click="action(index)" 
		      :class=" currentIndex === index ? 'listItem listItems':'listItem'"
		      >
		          <image :src="item.musicAlbumPicUrl"></image>
		          <view class="listItem1">
		            <view>{{item.musicName}}</view>
		            <view class="musicMes">
		              {{ item.musicArtistName }} - {{ item.musicAlbumName }}
		            </view>
		          </view>
		          <view class="listItem2">
		            <image v-if="ready === 'stop'" :src="index === currentIndex ? '../../static/img/listStop.png' : ''" @click="playandstop(index)"></image>
		            <image v-else :src="index === currentIndex ? '../../static/img/listPlay.png' : ''"  @click="playandstop(index)" ></image>
		          </view>
		        </view>
		      </scroll-view>
		    </swiper-item>
		    <swiper-item>
		     <!-- <mv :befH="befH" :aftH="aftH"></mv> -->
		    </swiper-item>
		  </swiper>
		</view>
		<view class="foot"><view class="f-nav-music">
		    <view><image
		      @touchstart="touchStart" 
		      @touchmove="touchMove"
		      @touchend="touchEnd"
		      :src="LogAndMes[0]"></image></view>
		    <text
		    @touchstart="MusictouchStart" 
		    @touchmove="MusictouchMove"
		    @touchend="MusictouchEnd"
		    >{{LogAndMes[1]}} - {{LogAndMes[2]}}</text>
		  </view>
		  <view class="f-nav-action">
		    
		    <view class="loading-warp">
		      <canvas class="canvas" canvas-id="canvasCircle"></canvas>
		      <canvas class="canvas-mask" canvas-id="canvasRing"></canvas>
		    </view>
		    <view class="speedBox">
		      <image :src="'../../static/img/'+ready+'.png'" @click="playandstop(currentIndex)"  :class="ready == 'play'? 'playss':'logps'"></image>
		    </view>
		  </view>
		</view>
	</view>
</template>

<script>
	let cm = uni.getBackgroundAudioManager();//音频对象
	let times = null;//时间
	var startX, endX,startY, endY,stime;//X,Y轴坐标
	var moveFlag =false,down = false; // 判断执行滑动事件
	var m = 0 , s = 0;//分秒
	export default {
		data() {
			return {
				befH: 84,
				aftH: 56.26,
				curTab: 0,//当前 导航分类 下标
				current: 0,//当前 导航分类-轮播图 下标
				currMusTime:0,//当前歌曲的时间
				isLoading:true,//是否刷新
				isLow:false,//是否触底
				navList:[{id:1,name:"歌曲"},{id:2,name:"专辑"},{id:3,name:"视频"}],//导航分类信息
				showlist:{},//传入当前页面信息
				musicList:[
				{
				  musicId	:	1,
				  musicName	:	"孤勇者",
				  musicAlbumName	:	"孤勇者",
				  musicAlbumPicUrl	:	'https://cdnmusic.migu.cn/picture/2021/1213/1449/AS3fae75dacce4228f0d4248a6fcf004fc.jpg',
				  musicMp3Url	:	'https://freetyst.nf.migu.cn/public/product9th/product45/2021/12/0915/2021%E5%B9%B412%E6%9C%8807%E6%97%A517%E7%82%B913%E5%88%86%E7%B4%A7%E6%80%A5%E5%86%85%E5%AE%B9%E5%87%86%E5%85%A5%E6%AD%A3%E4%B8%9C9%E9%A6%96475537/%E6%AD%8C%E6%9B%B2%E4%B8%8B%E8%BD%BD/MP3_40_16_Stero/6005663SX43151214.mp3?Key=e408976a8ff04026&Tim=1648315573640&channelid=00&msisdn=d4c3342e3e21464894869452a5d9c3f2&CI=6005663SX432600919000005413980&F=000009',
				  musicArtistName	:"陈奕迅",
				  sheetId	:	1
				},
				{
				  musicId	:	2,
				  musicName	:	"来自天堂的魔鬼",
				  musicAlbumName	:	"新的心跳",
				  musicAlbumPicUrl	:	'https://p1.music.126.net/kVwk6b8Qdya8oDyGDcyAVA==/1364493930777368.jpg',
				  musicMp3Url	:	'http://music.163.com/song/media/outer/url?http://dl.stream.qqmusic.qq.com/C400001DI2Jj3Jqve9.m4a?guid=7076823325&vkey=549B2876FFCA499093EE61C6CA19993B1C24500175D4A4F9AE72219B4802831F8F51CF6128C7F4C4F1DA8C906B1654151FB2AC316ABDD606&uin=1977331678&fromtag=66',
				  musicArtistName	:"G.E.M.邓紫棋",
				  sheetId	:	1
				},
				{
				  musicId	:	3,
				  musicName	:	"好久不见",
				  musicAlbumName	:	"认了吧",
				  musicAlbumPicUrl	:	'https://p1.music.126.net/o_OjL_NZNoeog9fIjBXAyw==/18782957139233959.jpg',
				  musicMp3Url	:	'http://music.163.com/song/media/outer/url?id=65538.mp3',
				  musicArtistName	:"	陈奕迅",
				  sheetId	:	1
				},
				],//存储音乐信息
				ready:"play",//歌曲播放状态
				LogAndMes:["../../static/img/musiclog.png","歌曲","歌手",""],//当前歌曲信息
				currentIndex:-1,//当前歌曲的下标
				stepd:0,//当前位置
				secd : 0, //当前时间
				seek_times:0,//跳转时间
				preorNex:"NAN",//切歌
				musicPageNum:1,//音乐当前页
				musicSize:10,//每页音乐量
				musicTotal:9999,//音乐总数
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function (options) {
		  
		  this.showlist=options;
		  
		  //初次加载获取歌曲
		  this.getMusic();
		},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function () {
		  uni.setNavigationBarTitle({
		    title: this.showlist.mes,
		  })
		  //创建并返回绘图上下文context对象。
		  var cxt = uni.createCanvasContext('canvasCircle');
		  cxt.setLineWidth(4);
		  cxt.setStrokeStyle('#fff');
		  cxt.setLineCap('round');
		  cxt.beginPath();
		  cxt.arc(29, 29, 25, 0, 2 * Math.PI, false);
		  cxt.stroke();
		  cxt.draw();
		},
					
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function () {
		},
					
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function () {
					
		},
					
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function () {
		  /*cm.stop()
		  this.cir(1.5 * Math.PI,1.5 * Math.PI)
		  clearInterval(this.interval);
		  let app = getApp();
		  app.globalData.dataMusic = 1;
		  console.log(app.globalData.dataMusic)
		  uni.redirectTo({
		    url: '/pages/home/home',
		  })*/
		  
		},
					
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function () {
					
		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function () {
		  
		},
		methods:{
			/**
			   * 分类滑动-导航
			   */
			  selectTab(e) {
				console.log("第" +e +"个导航");
			    let index = e;
			    this.curTab = index;
				this.current= index;
			  }
			   /**
			   * 分类滑动-轮播图
			   * @param {index} e 分类导航下标
			   */
			  ,
			  swiperChange(e) {
				console.log(e.detail.current+"轮播图")
			    let index = e.detail.current;
			    this.curTab = index;
			    this.current= index;
			  },
			  /**
			   * 歌曲信息
			   * @param {index} e 被操作歌曲的下标
			   */
			  action(e){
				  console.log("当前歌曲"+e)
			    let index = e;
			    if(index === this.currentIndex){return}
			    this.action_service(index);
			  },
			  /**
			   * 歌曲操作的service
			   */
			  action_service(index){
			    console.log("对象清除")
			    this.cir(1.5 * Math.PI,1.5 * Math.PI)
			    clearInterval(this.interval);
			    if(index > this.musicList.length -1){
			      index = 0;
			    }
			    if(index < 0){
			      index = this.musicList.length - 1;
			    }
			    //if(cm !== null){ cm.destroy();}//如果cm不为空说明之前被注册过，现在销毁
			    cm = uni.getBackgroundAudioManager();
				this.currentIndex = index;
				this.seek_times= 0;
				this.stepd = 1;
			    this.audios(index);
			  },
			  /**
			   * 音频相关
			   */
			  audios(index){
			    console.log("进入audio"+"index:"+index+","+"seek_times:"+this.seek_times+"stepd:"+this.stepd)
			    if(index !== -1 && this.seek_times === 0){
			      this.currentMusicMes(index)
			      //****必须设置 */
			      cm.title=this.musicList[index].musicName;//歌名
			      cm.singer=this.musicList[index].musicArtistName;//歌手
			      cm.coverImgUrl=this.musicList[index].musicAlbumPicUrl;//专辑图片
			      cm.src=this.musicList[index].musicMp3Url;//歌曲路径
			    }else{
			      cm.seek(this.seek_times)
			      cm.play()
			      
			      clearInterval(this.interval);
			      console.log("对象清除")
			     }
			   // cm.play()
			    // 监听音频进入可以播放状态的事件
			      cm.onCanplay(()=> {
			        if(index > -1 || !moveFlag){
			          // 必须。可以当做是初始化时长
			        cm.duration;
			        // 必须。不然也获取不到时长
			        setTimeout(() => {
						this.currMusTime = cm.duration;
			          
			          console.log("seek_times:"+this.seek_times)
			          
			          this.cirTime(cm.duration* 10,this.stepd,"")
			            
			        }, 1000);
			        }
			      })
			      console.log(2)
				  this.ready = "stop"
			      
			    //监听音频自然播放至结束的事件
			    cm.onEnded(() => {
			      console.log("歌曲结束")
			      this.playandstop();
			      this.action_service(index + 1);
			    })
			
			    cm.onPause(() => {
			      clearInterval(this.interval);
			      this.cir(1.5 * Math.PI,this.stepd * 2 * Math.PI / 100 + 1.5 * Math.PI)
			      this.ready = "play";
				  
			    })
			    cm.onPlay(() =>{
				  this.ready = "stop";
			      this.cirTime(this.secd,this.stepd + 1)
			    })
			    
			    //监听音频播放错误事件
			    cm.onError(() => {
			      uni.showToast({
			        title: '歌曲无法加载，将为您自动播放下一首！',
			        icon: 'none',
			        duration: 1500
			       })
			       console.log("歌曲异常")
			      this.action_service(index+1);
			    })
			},
			  /** 将当前要播放的音乐存起来 ，并播放*/
			  currentMusicMes(index){
			    let LogAndMes = this.LogAndMes;
			    LogAndMes[0] = this.musicList[index].musicAlbumPicUrl;
			    LogAndMes[1] = this.musicList[index].musicName;
			    LogAndMes[2] = this.musicList[index].musicArtistName;
			    LogAndMes[3] = this.musicList[index].musicMp3Url;
			    this.LogAndMes = LogAndMes;
			  },
			/**
			 *圆形进度条
			 */
			cirTime(time,step,touchAction){
			    if(time === undefined || time === 0 ){return}
			    clearInterval(this.interval);
			    //切换歌曲，清除进度条
			    if(step < 2){
			      
			      this.cir(1.5 * Math.PI,1.5 * Math.PI)
			    }
			    if(this.ready === "stop"|| touchAction === "go" || this.currentIndex === -1){
			      console.log(time+","+step)
			      if(time !== 0){
			        //加载动画
			        var me = this;
			    var steps = 1,startAngle = 1.5 * Math.PI,endAngle = 0,speed = 100,sec = time;
			      if(step > 1){
			          steps = step;
			        }
			    function drawing (s, e) {
			      var context = uni.createCanvasContext('canvasRing');
			      context.setLineWidth(4);
			      context.setStrokeStyle('#ff8831');
			      context.setLineCap('round');
			      context.beginPath();
			      context.arc(29, 29, 25, s, e, false);
			      context.stroke();
			      context.draw();
			    }
			    function drawLoading (){
			        if(steps < 101){
			            //这里用me,同步数据,渲染页面
						me.stepd = steps;
						me.secd = sec;
			            endAngle = steps * 2 * Math.PI / speed + startAngle;
			            drawing (startAngle, endAngle);
			            steps++;
			        }else{
			            clearInterval(this.interval);
			        }
			    }
			    this.interval = setInterval(drawLoading,sec);
			      }
			    }
			},
			/** 动态圆形样式 */
			cir(s,e){
			  var context = uni.createCanvasContext('canvasRing');
			        context.setLineWidth(4);
			        context.setStrokeStyle('#ff8831');
			        context.setLineCap('round');
			        context.beginPath();
			        context.arc(29, 29, 25, s, e, false);
			        context.stroke();
			        context.draw();
			},
			/**
			 * 歌曲的播放和暂停
			 */
			playandstop(){
			  console.log("停止，开启")
			  if(this.ready === "play"){
			   this.ready= "stop";
			   this.cirTime(this.secd,this.stepd + 1)
			    cm.play()
			  }else{
			    clearInterval(this.interval);
			    this.cir(1.5 * Math.PI,this.stepd * 2 * Math.PI / 100 + 1.5 * Math.PI)
			    this.ready= "play";
			    cm.pause()
			  }
			},
			  
			  getMusic:function(){
			    if((this.musicPageNum-1) * this.musicSize >= this.musicTotal){
			      uni.showToast({
			        title: "哇偶  ∑(っ°Д°;)っ  没有音乐了",
			        icon: 'none',
			        duration: 1500
			       })
			       return;
			    }
			    uni.request({
			      url: 'http://192.168.42.185:9001/music/music',
			      method:"GET",
			      data:{
			        pageNum:this.musicPageNum,
			        size:this.musicSize,
			      },
			      success:(res) => {
			        console.log(res)
			        if(this.musicPageNum === 1){
						this.musicList=res.data.data.list;
			            this.musicPageNum=res.data.data.pageNum + 1;
			            this.musicTotal=res.data.data.total;
			        }else{
					this.musicList=[...this.musicList,...res.data.data.list];
			          this.musicPageNum=this.musicPageNum + 1;
			        }
			      },
			      fail:(res) => {
			        uni.showToast({
			          title: "糟糕！！！ ﾍ(;´Д｀ﾍ)  网络不能用",
			          icon: 'none',
			          duration: 1500
			         })
			         return;
			      },
			      complete:()=>{ 
			       uni.hideLoading()
				   this.isLow=false;
			      }
			    })
			    
			  },
			  /**
			   * 触底事件
			   */
			   stopLow:function(){
				   this.isLow = true;
			    
			    uni.showLoading({
			      title: '正在加载...',
			      })
			      this.getMusic();
			   },   
			  
			  /**
			   * 局部页面上拉触底事件处理函数------
			   */
			lower:function(){
			  console.log("触底")
			  if(this.isLow){return}
			  this.stopLow();
			},
			/**
			   * 局部页面上拉触底事件处理函数------
			   */
			pullDownRefresh:function(){
			  console.log("刷新")
			  uni.request({
			    url: 'http://192.168.42.185:9001/music/music',
			    method:"GET",
			    data:{
			      pageNum:1,
			      size:this.musicSize,
			    },
			    success:(res) => {
			      console.log(res)
			      this.musicList=res.data.data.list;
			      this.musicPageNum=1;
			      this.isLow=false;
			    }
			  })
			  this.isLoading=false;
			  
			},
			  /**
			   * 用户点击右上角分享
			   */
			  onShareAppMessage: function () {
			
			  },
			  touchStart: function(e) {
			    console.log("滑动事件1"+e)
			    startX = e.touches[0].pageX; // 获取触摸时的原点
					moveFlag = true;
				},
				// 触摸移动事件
				touchMove: function(e) {
					console.log("滑动事件2"+e)
			    endX = e.touches[0].pageX; // 获取触摸时的原点
					if (moveFlag) {
						if (endX - startX > 20) {
			        stime  =(( this.currMusTime / 220) * (endX - startX -21)) //滑动了多少秒
			        m = parseInt(stime / 60);
			        s = parseInt((stime %60));
			        let time = m*60+s+1;
			        if(time < this.currMusTime && time >=1){
			          uni.showToast({
			            title: m+':'+s,
			            icon: 'none',
			            duration: 1500
			           })
			        }
			    
			      }
					}
				},
				// 触摸结束事件
				touchEnd: function(e) {
			    let stepds = parseInt((stime/this.currMusTime)*100+1)//滑动之后进度条位置
			    if(stepds > 101 ||this.currentIndex === -1){return}
			    this.stepd=stepds;
			    this.seek_times=parseInt(stime);
			    if(this.ready === "play"){
			      console.log(1)
				  this.ready="stop";
			      
			    }
			    this.cir(1.5 * Math.PI,this.stepd * 2 * Math.PI / 100 + 1.5 * Math.PI)
			    this.cirTime(this.currMusTime*10,stepds,"go");
			    console.log("触摸结束")
			    this.audios(this.currentIndex)
			    moveFlag = false; // 回复滑动事件
			    startX=0;
			    endX=0;
				},
			/**滑动切歌开始 */
			MusictouchStart: function(e) {
			  startX = e.touches[0].pageX; // 获取触摸时的原点
			  moveFlag = true;
			},
			// 触摸移动事件
			MusictouchMove: function(e) {
			  endX = e.touches[0].pageX; // 获取触摸时的原点
			  if (moveFlag) {
			    //右滑大于50--下一首
			    if (endX - startX > 50) {
					this.preorNex="Nex";
			      
			    }
			    //左滑大于50--上一首
			    if(startX - endX > 50){
					this.preorNex="pre"; 
			    }
			  }
			},
			// 触摸结束事件
			SpeedtouchEnd: function(e) {
			  if(this.preorNex === "pre"){
			    this.action_service(this.currentIndex - 1);
			  }
			  if(this.preorNex === "Nex"){
			    this.action_service(this.currentIndex + 1);
			  }
			  moveFlag = false;
			  startX=0;
			  endX=0;
			},
			/**滑动切歌结束 */
			/**滑动调速开始 */
			SpeedtouchStart: function(e) {
			  startX = e.touches[0].pageX; // 获取触摸时的原点
			  startY = e.touches[0].pageY;
			  moveFlag = true;
			},
			// 触摸移动事件
			SpeedtouchMove: function(e) {
			  endX = e.touches[0].pageX; // 获取触摸时的原点
			  endY = e.touches[0].pageY;
			  if (moveFlag) {
			    //上滑大于40--可以开始调速
			    if (startY - endY > 100) {
			        //2.0倍速
			        uni.showToast({
			          title: "2.0 倍速",
			          icon: 'none',
			          duration: 1500
			         })
			        }else if(startY - endY > 70){
			        //1.5倍速
			        uni.showToast({
			          title: "1.5 倍速",
			          icon: 'none',
			          duration: 1500
			         })
			      }else if(startY - endY > 40){
			        down = true;
			        //默认速度 1.0
			        uni.showToast({
			          title: "1.0 倍速",
			          icon: 'none',
			          duration: 1500
			         })
			      }
			    //上滑后下滑大于10并且不允许上滑--0.5倍速
			    if(down && startY - endY <= 40){
			      uni.showToast({
			        title: "0.5 倍速",
			        icon: 'none',
			        duration: 1500
			       })
			      
			    }
			    //如果左滑大于50恢复1.0倍速
			    if(startX - endX > 50){
			      uni.showToast({
			        title: "恢复默认速度 1.0 倍速",
			        icon: 'none',
			        duration: 1500
			       })
			    }
			  }
			},
			// 触摸结束事件
			SpeedtouchEnd: function(e) {
			  let speedValue = 1.0;
			  if (moveFlag) {
			   
			    //如果左滑大于50恢复1.0倍速
			    if(startX - endX > 50){
			      speedValue = 1.0;
			    }else{
			       //上滑大于40--可以开始调速
			    if (startY - endY > 100) {
			      //2.0倍速
			      speedValue = 2.0;
			      }else if(startY - endY > 70){
			      //1.5倍速
			      speedValue = 1.5;
			    }
			  //上滑后下滑大于10并且不允许上滑--0.5倍速
			  if(down && startY - endY <= 40){
			   speedValue = 0.5;
			  }
			    }
			  }
			  console.log(speedValue)
			  cm.playbackRate=speedValue;
			  moveFlag = false;
			  down = false
			  startX=0;
			  endX=0;
			  startY=0;
			  endY=0;
			}
			/**滑动调速结束 */
		},
		
	
	}
</script>

<style lang="scss">
.box{
  display: flex;
  flex-direction: column;
  height:100vh;
}

.nav-item{
  height: 100%;
  width: 100%;
  line-height: 100rpx;
  text-align: center;
}
.list {
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  border-top: 1rpx solid #D9D9D9;
  height: 100rpx;
}
.nav-item {
  font-size: 43rpx; 
  display:flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  justify-content:center;/*横向居中*/
  align-items: center;/*纵向居中*/
  /*flex-direction: column;纵向布局*/
  float: left;
  width: 33.33333333%;
  height: 100rpx;
  box-sizing: border-box;
  background-color: #FFFFFF;
  border-right: 1rpx solid #D9D9D9;
  border-bottom: 1rpx solid #D9D9D9;
}
.selected-tab {
  color: #3EF2C2;
  border-bottom: 10rpx solid #3EF2C2;
  }
.swiper{
  width: 100%;/*750.4rpx*/
  height: 100%;
  display: flex;
  flex: 1;
  position: relative;
  overflow-x: auto;
  white-space: nowrap;
  flex-direction:row;
}
.lis{
  display:flex;
  flex:1;
  position: relative;
  overflow-y: auto;
}
.item1,.item2{
  height: 84.1vh;
  display: inline-block;
  
}
.listItem,.item2 > view{
  height: 65px;
  display: flex;
  margin-top: 0.5vh;
  margin-left: 0.5vh;
}
.listItems{
  color: #3EF2C2;
}
.listItem1{
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  width: 58%;
  margin-left: 0.5vh;
}
.listItem1 :first-child{
  font-size: 20px;
}
.listItem1 :first-child ,.listItem2 :last-child{
  overflow: hidden;
  white-space: nowrap; 
  text-overflow: ellipsis;
}
.listItem2{
  position: relative;
  margin-left: 4.5vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.listItem > image{
  height: 65px;
  width: 65px;
}
.scroll view{
  height: 500px;
  width: 370px;
}
.foot{
  height: 9vh;
  background-color: #3EF2C2;
  display: flex;
  flex-direction: row;
  /*justify-content: space-between;*/
}
.f-nav-music,.f-nav-action{
  display: flex;
  align-items: center;
}
.f-nav-music{
  width: 75%;
}
.f-nav-music view{
  display: inline-block;
  height: 9vh;
  width: 9vh;
  margin-left: 3vh;
  margin-bottom: 3vh;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid #ff8831;
  z-index: 1;
}
.f-nav-music image{
  height: 9vh;
  width: 9vh;
}
.f-nav-music text{
  width: 64%;
  height: 9vh;
  line-height: 9vh;
  margin-left: 1vh;
  font-size: 17px;
  overflow: hidden;
  white-space: nowrap; 
  text-overflow: ellipsis;
}
.f-nav-action{
  height: 9vh;
  width: 25%;
}
.playss{ margin-left: 1.6vw;}
.logps{ margin-left: 0.3vw;}
.f-nav-action image ,.listItem2 image{
  height: 30.2px;
  width: 30.2px;
  align-content: normal;
  z-index: 3;
}

/* loading start */
.loading-warp {
    z-index: 0;
    position: absolute;
    width: 58px;
    height: 58px;
    margin-left: 1.5vh;
  }
.canvas {
  z-index: 1;
}
.canvas-mask {
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
}
.speedBox{
  justify-content: center;
  z-index: 3;
  display: flex;
  align-items: center;margin-left: 1.5vh;
}
.canvas,.canvas-mask,.speedBox{
  
  width: 58px;
  height: 58px;
}
/* loading end */
</style>
